<template>
  <div 
    :class="[
      'bx-menu',
      'bx-glass',
      `bx-menu--${mode}`,
      `bx-menu--${theme}`,
      {
        'bx-menu--collapsed': collapsed
      }
    ]"
  >
    <slot></slot>
  </div>
</template>

<script>
import { provide, ref, reactive } from 'vue'

export default {
  name: 'BxMenu',
  props: {
    mode: {
      type: String,
      default: 'vertical',
      validator: (value) => ['horizontal', 'vertical', 'inline'].includes(value)
    },
    theme: {
      type: String,
      default: 'light',
      validator: (value) => ['light', 'dark'].includes(value)
    },
    collapsed: {
      type: Boolean,
      default: false
    },
    defaultSelectedKeys: {
      type: Array,
      default: () => []
    },
    defaultOpenKeys: {
      type: Array,
      default: () => []
    },
    selectedKeys: {
      type: Array,
      default: () => []
    },
    openKeys: {
      type: Array,
      default: () => []
    }
  },
  emits: ['select', 'openChange'],
  setup(props, { emit }) {
    const selectedKeys = ref(props.selectedKeys.length ? props.selectedKeys : props.defaultSelectedKeys)
    const openKeys = ref(props.openKeys.length ? props.openKeys : props.defaultOpenKeys)

    const menuContext = reactive({
      mode: props.mode,
      theme: props.theme,
      collapsed: props.collapsed,
      selectedKeys,
      openKeys,
      handleSelect: (key, keyPath) => {
        selectedKeys.value = [key]
        emit('select', { key, keyPath, selectedKeys: selectedKeys.value })
      },
      handleOpenChange: (key, open) => {
        if (open) {
          if (!openKeys.value.includes(key)) {
            openKeys.value.push(key)
          }
        } else {
          const index = openKeys.value.indexOf(key)
          if (index > -1) {
            openKeys.value.splice(index, 1)
          }
        }
        emit('openChange', openKeys.value)
      }
    })

    provide('bx-menu', menuContext)

    return {
      selectedKeys,
      openKeys
    }
  }
}
</script>

<style scoped>
.bx-menu {
  background: var(--bx-glass-bg);
  backdrop-filter: var(--bx-glass-blur);
  border: 1px solid var(--bx-glass-border);
  border-radius: var(--bx-radius-medium);
  font-family: var(--bx-font-family);
  overflow: hidden;
}

.bx-menu--horizontal {
  display: flex;
  border-radius: var(--bx-radius-medium);
}

.bx-menu--vertical,
.bx-menu--inline {
  display: block;
  width: 100%;
}

.bx-menu--dark {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
}

.bx-menu--collapsed {
  width: 80px;
}

.bx-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  pointer-events: none;
  border-radius: inherit;
}
</style>

